//容器最外层
.action-screen {
  //根容器-头部
  &-header {
    //LOGO
    &-logo {
      flex-grow: 0;
      display: flex;
      width: 480px;
      min-width: 480px;
      background: url("~@static/images/actionBigscreen/title.png") no-repeat;

      //LOGO文字
      & > span {
        width: 100%;
        color: white;
        font-size: 22px;
        letter-spacing: 6px;
        line-height: 62px;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
      }
    }
    //机组标签页
    &-tabs {
      flex-grow: 1;
      flex-shrink: 1;

      //标签列表容器
      & > .header-tabs-inner {
        margin: 0 30px;
        overflow: hidden;

        //鼠标悬停，显示滚动条
        &:hover {
          overflow-x: auto;
          overflow-y: hidden;
        }

        //隐藏滚动条
        &::-webkit-scrollbar {
          height: 7px;
        }

        //滚动条样式
        &::-webkit-scrollbar-thumb {
          border-radius: 40px;
          background: #cccccc;
          opacity: 0.6;
        }

        //滚动条背景样式
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          background: #e6f0ff;
        }
      }
    }
    //下拉菜单
    &-dropdown {
      flex-grow: 0;
    }
  }
  //根容器-内容
  &-main {
    //设备内容容器
    &-content {
      height: 100%;
      border-top: 2px solid #e5e7ed;
      background-color: #f5f5f5;
      box-sizing: border-box;

      & > .equipment {
        //设备状态
        &-status {
          padding: 10px;
          height: 40px;
          box-sizing: border-box;
        }

        //设备列表
        &-list {
          padding: 0 10px;
          box-sizing: border-box;
          height: calc(100% - 60px);
          display: grid;
          grid-template-columns: repeat(auto-fill, 222px);
          grid-template-rows: repeat(auto-fill, 229px);
          grid-row-gap: 10px;
          grid-column-gap: 10px;
          justify-content: space-around;
          overflow-x: hidden;
          overflow-y: scroll;

          //鼠标悬停时显示滚动条
          /*  &:hover {
            overflow-y: auto;
          } */

          //隐藏滚动条
          &::-webkit-scrollbar {
            width: 5px;
          }

          //滚动条样式
          &::-webkit-scrollbar-thumb {
            border-radius: 40px;
            background: #cccccc;
            opacity: 0.6;
          }

          //滚动条背景样式
          &::-webkit-scrollbar-track {
            border-radius: 10px;
            background: #e6f0ff;
          }
        }
      }
    }
  }
}
